var swiperImgList = [
    './static/uploads/upload/slider-1.png',
    './static/uploads/upload/slider-2.png',
    './static/uploads/upload/slider-3.png',
    './static/uploads/upload/slider-4.jpg'
];
var swiper = document.querySelector('.swiper a');
var swiperIndex = 0;
var leftArrow = document.querySelector('.arrow-l');
var rightArrow = document.querySelector('.arrow-r');
let circles = document.querySelectorAll(".slider-circle li")
swiper.style.backgroundImage = `url(${swiperImgList[swiperIndex]})`;
leftArrow.addEventListener('click', function() {
    swiperIndex = --swiperIndex < 0 ? swiperImgList.length - 1 : swiperIndex;
    swiper.style.backgroundImage = `url(${swiperImgList[swiperIndex]})`;
})
rightArrow.addEventListener('click', function() {
        swiperIndex = ++swiperIndex > swiperImgList.length - 1 ? 0 : swiperIndex;
        swiper.style.backgroundImage = `url(${swiperImgList[swiperIndex]})`;
    })
    //封装切换图片函数
changeImg(swiperIndex);
leftArrow.addEventListener('click', function() {
    swiperIndex = --swiperIndex < 0 ? swiperImgList.length - 1 : swiperIndex;
    changeImg(swiperIndex);
})
rightArrow.addEventListener('click', function() {
    swiperIndex = ++swiperIndex > swiperImgList.length - 1 ? 0 : swiperIndex;
    changeImg(swiperIndex);
})

function changeImg(index) {
    swiper.style.backgroundImage = `url(${swiperImgList[index]})`;
}

// 切换原点
circles.forEach(function(item, index) {
    item.onclick = function() {
        swiperIndex = index;
        changeImg(swiperIndex);
    }
});

function currentCircle(index) {
    for (var i = 0; i < circles.length; i++) {
        circles[i].className = '';
    }
    circles[index].className = 'current';
}

function changeImg(index) {
    swiper.style.backgroundImage = `url(${swiperImgList[index]})`;
    currentCircle(index);
}

leftArrow.addEventListener('click', function() {
    if (flag == false) {
        return;
    }
    flag = false;
    swiperIndex = --swiperIndex < 0 ? swiperImgList.length - 1 : swiperIndex;
    changeImg(swiperIndex);
    setTimeout(function() {
        flag = true;
    }, 1000);
})
rightArrow.addEventListener('click', function() {
    if (flag == false) {
        return;
    }
    flag = false;
    swiperIndex = ++swiperIndex > swiperImgList.length - 1 ? 0 : swiperIndex;
    changeImg(swiperIndex);
    setTimeout(function() {
        flag = true;
    }, 1000);
})
circles.forEach(function(item, index) {
        item.onclick = function() {
            if (flag == false) {
                return;
            }
            flag = false;
            swiperIndex = index;
            changeImg(swiperIndex);
            setTimeout(function() {
                flag = true;
            }, 1000);
        }
    })
    // 自动切换
autoSwiper();
swiper.onmouseenter = function() {
    clearInterval(swiperTimer);
}
swiper.onmouseleave = function() {
    autoSwiper();
}

function autoSwiper() {
    swiperTimer = setInterval(function() {
        swiperIndex = ++swiperIndex > swiperImgList.length - 1 ? 0 :
            swiperIndex;
        changeImg(swiperIndex);
    }, 2000);
}